
<template>
  <!-- 左侧数据面板 -->
  <div>
    <el-form label-position="top" class="panel" style="text-align:left;">
      <el-form-item v-show="dataSrcVisible" label="数据源:">
        <el-select
          v-model="selectedTable"
          size="mini"
          filterable
          placeholder="选择数据源"
          style="width:200px;"
          clearable
          @change="handleDataSrcChange"
        >
          <el-option
            v-for="item in dataSourceList"
            :key="item.id"
            :label="item.text"
            :value="item.name"
          />
        </el-select>
      </el-form-item>

      <el-form-item v-show="!dataSrcVisible" label="当前表：">
        <span style="font-size: 12px;margin-right: 5px;">{{ selectedTable }}</span>
        <el-button type="text" size="mini" @click="editDataSrc">修改</el-button>
      </el-form-item>
      <el-form-item label="字段：">
        <draggable
          v-model="tableSchema"
          v-loading="schemaLoading"
          :group="{name: 'col',pull: 'clone', put: false}"
          :move="handleMove"
        >
          <div v-for="col in tableSchema" :key="col.Column" class="drag-list-item">
            <i class="el-icon-rank" style="font-size: 12px;color:#409EFF;" />
            {{ col.Column }}
          </div>
        </draggable>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//import { tables } from '@/mock/dataSource'
import { gettableList } from "@/api/chart";
import draggable from "vuedraggable"; //拖拽属性
import exeSql from "@/api/exeSql";
import store from "../store";

export default {
  components: { draggable },
  props: {
    //组件间通信，向父组件传递
    resultLoading: {
      default: false
    },
    dataSrc: {
      requred: true
    }
  },
  data() {
    return {
      schemaLoading: false, //下方表结构加载(表的列名，注意是中文)
      dataSourceList: [], //数据源列表
      selectedTable: undefined,
      tableSchema: undefined, //表架构，表列
      dataSrcVisible: this.$route.params.id === "create", //数据源信息可见性
      existWarning: null //存在警告
    };
  },
  computed: {
    //计算属性，vuex状态保持
    allSelected() {
      return store.state.dimensions.concat(store.state.caculCols);
    }
  },
  created() {
    //连接数据库后，该部分更改为查询到的列表名*构建ajax请求
    this.gettableList();
  },
  methods: {
    initWithDataSrc(dataSrc) {
      //初始化数据源
      if (dataSrc) {
        this.selectedTable = dataSrc;
        this.fetchSchema();
      } else {
        this.selectedTable = dataSrc;
        this.tableSchema = [];
        this.dataSrcVisible = true;
      }
    },
    gettableList() {
      //获取数据源列表
      gettableList().then(response => {
        // console.log(response.data)
        this.dataSourceList = response.data;
      });
    },
    editDataSrc() {
      //修改数据源
      this.dataSrcVisible = true;
      this.selectedTable = undefined;
    },
    handleDataSrcChange() {
      //处理数据更改
      this.dataSrcVisible = false;
      this.fetchSchema();
      store.setAllColsAction([]);
      this.$emit("change", this.selectedTable);
    },
    fetchSchema() {
      //获取表架构
      if (!this.selectedTable) {
        this.tableSchema = [];
        return;
      }
      this.schemaLoading = true;
      //console.log(this.selectedTable)
      //desc table显示数据表的表都定义了哪些字段，及各个字段的类型大小
      exeSql()
        .fetch(`desc ${this.selectedTable}`)
        .then(resp => {
          this.schemaLoading = false;
          this.tableSchema = resp.data.map((item, index) => {
            return {
              Column: item.Field,
              Type: item.Type,
              id: index
            };
          });
          store.setAllColsAction(this.tableSchema);
          //console.log(this.tableSchema)
        });
    },
    handleCloseDialog(done) {
      if (this.selectedTable) {
        done();
      } else {
        this.$message({
          type: "warning",
          message: "未获取到数据源信息，请先行配置！"
        });
        done();
      }
    },
    //拖拽查询
    handleMove(evt, originalEvent) {
      if (
        this.allSelected.find(
          item => item.Column === evt.draggedContext.element.Column
        )
      ) {
        if (!this.existWarning) {
          this.existWarning = this.$message({
            type: "warning",
            message: "当前维度数值信息配置已满！",
            onClose: instance => {
              this.existWarning = null;
            }
          });
        }
        return false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.panel {
  /deep/ .el-form-item__label {
    line-height: initial;
  }
  /deep/ .el-form-item__content {
    line-height: initial;
  }
}
.drag-list-item {
  line-height: 1.5;
  font-size: 14px;
  color: #606266;
  cursor: -webkit-grab;
}
</style>
